<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Leaflet</title>
</head>

<!-- 1.引入Leaflet css 与js 文件，官网要求，css在前 js在后 -->
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet-src.js"> </script>
<!-- 增加Leaflet的扩展，其中包含各种中国图层提供商的配置 -->
<script src="./Leaflet.ChineseTmsProviders/src/leaflet.ChineseTmsProviders.js"></script>
<!-- 用于在现有折线上或沿坐标路径定义和绘制图案 -->
<!-- <script src="./Leaflet.PolylineDecorator/src/L.PolylineDecorator.js"></script> -->
<!-- 2.增加 地图css样式，设置高度，这个官网要求必须的。**不设置会不显示地图 ** -->
<style>
  #mapDiv {
    height: 100vh;
  }
</style>

<body>
  <!-- 创建一个地图的div容器，id必须有 但是自定义 -->
  <div id="mapDiv"></div>

  <script src="">
    // 继承创建一个构造函数
    L.TileLayer.ChinaProvider = L.TileLayer.extend({
      initialize: function (type, options) { // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;

        var parts = type.split('.');

        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];

        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;

        L.TileLayer.prototype.initialize.call(this, url, options);
      }
    });

    // 地图资源
    L.TileLayer.ChinaProvider.providers = {
      TianDiTu: {
        Normal: {
          Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}",
          Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}"
        },
        // 卫星图
        Satellite: {
          Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}",
          Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}"
        },
        // 地形图
        Terrain: {
          Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}",
          Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}"
        },
        // 子域
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
      },

      GaoDe: {
        Normal: {
          Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        },
        // 卫星图
        Satellite: {
          Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
        },
        Subdomains: ["1", "2", "3", "4"]
      },

      Google: {
        Normal: {
          Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
          Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
      },

      Geoq: {
        Normal: {
          Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
          Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}",
          PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
          Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
          Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []
      }
    };

    // 实例化构造函数
    L.tileLayer.chinaProvider = function (type, options) {
      return new L.TileLayer.ChinaProvider(type, options);
    };

  </script>
  <script>
    //插件把定义了多个国内的瓦片图层，我们只需要通过提供的方法访问到相应的图层即可
    //从插件代码可以看出 需要传入 providerName.mapName.mapType 从插件代码中查找所需要的值
    const zoomParams = {
      maxZoom: 18,
      minZoom: 5
    };
    var test = L.tileLayer.chinaProvider('Geoq.Normal.Map', zoomParams);
    //此处可以定义多个图层，并可以再页面中进行选择
    var baseLayers = {
      "天地图(TianDiTu)": L.tileLayer.chinaProvider('TianDiTu.Normal.Map', zoomParams),
      // {
      //   "默认地图(Normal)": L.tileLayer.chinaProvider('TianDiTu.Normal.Map', zoomParams),
      //   "卫星图(Satellite)": L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', zoomParams),
      //   "地形图(Terrain)": L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', zoomParams),
      // },
      "高德(GaoDe)": L.tileLayer.chinaProvider('GaoDe.Normal.Map', zoomParams),
      "谷歌(Google)": L.tileLayer.chinaProvider('Google.Satellite.Map', zoomParams),
      "？？？(Geop)": test,
    }

    var map = L.map("mapDiv", {
      // 武汉：30°22′-115°05
      center: [30.58, 115.05],
      zoom: 10,// 打开时默认缩放倍数
      layers: [test],// 默认图层
      zoomControl: false
    });
    // 选择图层加入到
    L.control.layers(baseLayers, null).addTo(map);
    // 放大缩小的方法
    L.control.zoom({
      zoomInTitle: '放大',
      zoomOutTitle: '缩小'
    }).addTo(map);

    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
    }
    map.on('click', onMapClick);


    // 画线的如下代码 需要上一节的代码
    var arrow = L.polyline([[41.80, 123.43], [41.07, 123.00]], { opacity: 1, color: 'firebrick' })
      .bindPopup('I am red:')
      .addTo(map);//
    var arrow2 = L.polyline([[41.80, 123.43], [40.13, 124.37]], { opacity: 1, color: 'lightgreen' })
      .bindPopup('I am green:1')
      .addTo(map);
    var arrow3 = L.polyline([[41.07, 123.00], [40.13, 124.37]], { opacity: 1, color: 'lightgreen' })
      .bindPopup('I am green:2')
      .addTo(map);

    var arrowHead = L.polylineDecorator(arrow, {
      patterns: [
        // offset，endOffset并且repeat可以分别定义为数字（以像素为单位）或行长度的百分比（字符串）（例如：）'10%'。
        {
          offset: '30%',//从线的起点到第一个图案符号的偏移量。默认值：0 - 非必需
          endOffset: '90%',//从线的终点到最后一个图案符号的最小偏移量。默认值：0 - 非必需
          repeat: 1000,// 模式符号的重复间隔。定义每个连续符号的锚点之间的距离 - 必需
          symbol: L.Symbol.arrowHead({//符号工厂类的实例。 - 必需
            pixelSize: 10,
            polygon: false,
            pathOptions: {
              stroke: true,
              weight: 2,
              color: 'firebrick'
            }
          })
        }
      ]
    }).addTo(map);
  
    var polyline = L.polyline([[30.58, 115.05], [32.58, 116.05]], { opacity: 1, color: 'lightgreen' })
    .addTo(map);
    var decorator = L.polylineDecorator(polyline, {
        patterns: [
            // defines a pattern of 10px-wide dashes, repeated every 20px on the line
            {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
        ]
    }).addTo(map);

  </script>

</body>

</html>